<template>
	<view class="wrapper">
    <view class="nav" :style="{paddingTop: statusbarHeight + 'px'}">
      <view class="title">
        <view class="back" @click="back">
          <u-icon name="arrow-left" color="#333" size="18px"></u-icon>
        </view>
        <text class="text">我的订单</text>
      </view>
      <view class="tab">
        <u-subsection
          mode="subsection"
          bgColor="#f7f8f9"
          inactiveColor="#666666"
          :activeColor="activeColor"
          :list="tabs"
          @change="changeIndex"
          :current="current"
          fontSize="24rpx"></u-subsection>
      </view>
    </view>
    <view class="list" v-if="list.length > 0">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="time">
          <view class="text">订单号: {{ item.sn }}</view>
          <view class="text" v-if="false">{{ item.create_time }}</view>
        </view>
        <view class="product" v-for="(o, i) in item.item" :key="i">
          <template v-if="o.product">
            <view class="image">
              <u--image
                  class="img"
                  lazy-load width="160rpx"
                  height="160rpx"
                  :fade="true" duration="450"
                  :src="baseUrl + o.sku.image.thumbnail_path"
                  v-if="o.sku && o.sku.image"></u--image>
              <u--image
                  class="img"
                  lazy-load width="160rpx"
                  height="160rpx"
                  :fade="true" duration="450"
                  :src="baseUrl + o.product.mainImage.thumbnail_path"
                  v-else-if="o.product.mainImage"></u--image>
            </view>
            <view class="desc">
              <view class="title two-lines">{{ o.product.title }}</view>
              <view class="sku" v-if="o.selected_sku_text && Array.isArray(o.selected_sku_text)">
                {{ o.selected_sku_text.join(', ') }}
                x
                {{ o.quantity }}
              </view>
              <view class="price">
                价格: <text class="unit">￥</text><text>{{ o.price * 1 }}</text>
                <template v-if="o.freight > 0">
                  <text class="split"></text>
                  运费: <text class="unit">￥</text><text>{{ o.freight * 1 }}</text>
                </template>
              </view>
            </view>
          </template>
        </view>
        <view class="status">
          <!-- 订单状态 -->
          <view class="text">{{ item | statusText }}</view>
          <template  v-if="item.is_group === 1">
            <!-- 拼团状态 -->
            <view v-if="item.group" class="group" :class="{'done': item.group && item.group.status * 1 === 2}">{{ item.group.status | groupStatus }}</view>
            <!-- 中奖状态 -->
            <view v-if="item.group && item.group.status === 2" class="win" :class="{'not': item.is_win === 0}">{{ item.is_win === 1 ? '拼中' : '未拼中' }}</view>
          </template>
        </view>
        <view class="ops">
          <view class="amount" v-if="item.status * 1 !== 0">实付金额:<text class="unit">￥</text><text>{{ item.total_pay * 1 }}</text></view>
          <view class="btn">
            <view class="x" v-if="item.status * 1 === 0">
              <u-button class="" text="取消" size="small" @click="onCancel(item)"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 0 && false">
              <u-button class="" text="去支付" size="small"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 2" @click="onReceived(item)">
              <u-button class="" text="确认收货" size="small"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 3">
              <u-button class="" text="评价" size="small" @click="onComment"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 3">
              <u-button class="" text="申请售后" size="small" @click="onService"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 1" @click="onUrge">
              <u-button class="" text="催发货" size="small"></u-button>
            </view>
            <view class="x" v-if="item.is_group * 1 === 1" @click="onGroup(item)">
              <u-button class="" text="拼团详情" size="small" type="primary"></u-button>
            </view>
          </view>
        </view>
        <view class="express" v-if="item.status * 1 === 2" @click="onExpress(item)">
          查看物流信息...
        </view>
        <!-- todo mini express -->
        <view class="x" @click="onDetail(item)">
          <u-button class="xx" text="订单详情" size="small" type="info"
            :customStyle="{'color': '#999999', 'font-size': '20rpx'}"></u-button>
        </view>
      </view>
    </view>
    <view class="list nothing" v-else>
      暂无相关订单...
    </view>
    <arrow />
    <u-back-top bottom="80" right="40" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.99'}"></u-back-top>
  </view>
</template>

<script>
import color from '@/config/color.js'
import Arrow from '../../components/arrow'
import config from '../../config/config'
import base64 from '../../util/base64'
import Order from '../../api/order'
const orderModel = new Order()

	export default {
    components: {
      Arrow
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    filters: {
      statusText(v) {
        console.log(v)
        if (v.is_group && v.is_win == 0) {
          // if (v.status == 1) {
          //   return '待完成'
          // }
          return '不用发货'
        }
        switch (+v.status) {
          case 0:
            return '待支付'
          case 1:
            return '待发货'
          case 2:
            return '待收货'
          case 3:
            return '待评价'
          case 4:
            return '售后中'
          case 5:
            return '已取消'
          case 6:
            return '已退款'
          case 10:
            return '已完成'
        }
      },
      groupStatus(v) {
        switch (+v) {
          case 0:
            return '待支付'
          case 1:
            return '拼团中'
          case 2:
            return '拼团已完成'
        }
      }
    },
		data() {
			return {
        activeColor: color.main_color,
        scrollTop: 0,
			  baseUrl: config.baseUrl,
        tabs: ['全部', '待付款', '待发货', '待收货', '待评价', '售后'],
        current: 0,
        list: [],
        queryList: {
          page: 0,
          pageSize: 10,
          busy: false
        },
        statusbarHeight: 0
			}
		},
    onPullDownRefresh() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.getList()
    },
    onReachBottom() {
      this.getList(true)
    },
		onLoad(options) {
      // 状态栏高度
      uni.getSystemInfo({
        success: res => {
          this.statusbarHeight = res.statusBarHeight
        }
      })
      // 测试中, Mini => 20px, Android => 32px
      // console.log(this.statusbarHeight)
      const index = +options.type || 0
      this.current = index
      this.getList()
		},
		methods: {
      // 添加方法
      onDetail(item) {
        uni.navigateTo({
          url: `/sub_service/order/detail?id=${item.id}`
        })
      },
      // 查看拼团
      onGroup(item) {
        uni.navigateTo({
          url: `/sub_product/group/view?id=${item.group.id}`
        })
      },
		  back() {
		    uni.navigateBack()
      },
      changeIndex(index) {
        this.current = index
        this.queryList = {
          page: 0,
          pageSize: 10,
          busy: false
        }
        this.list = []
        this.getList()
      },
      getList(append = false) {
        if (this.queryList.busy === false) {
          this.queryList.page++
          this.loading = true
          this.queryList.busy = true
          orderModel.orderList({
            ...this.queryList,
            status: this.current
          }).then(response => {
            let { data } = response
            data = base64.parse(data)
            if (data.list.length === 0) {
              this.queryList.busy = true
            } else {
              this.queryList.busy = false
              if (append) {
                this.list = this.list.concat(data.list)
              } else {
                this.list = data.list
              }
            }
            uni.stopPullDownRefresh();
            console.log(this.list)
          })
        }
      },
      onComment() {
		    uni.showToast({
          icon: 'none',
          title: '评价已经关闭'
        })
      },
      onService() {
        uni.showToast({
          icon: 'none',
          title: '请联系客服'
        })
      },
      onUrge() {
        uni.showToast({
          icon: 'none',
          title: '催促完成,我们正在处理!'
        })
      },
      onCancel(item) {
		    orderModel.orderDelete({ order_id: item.id }).then(() => {
		      this.$set(item, 'status', '-99')
          this.list = this.list.filter(x => x.id !== item.id)
          uni.showToast({
            icon: 'none',
            title: '操作成功'
          })
        })
      },
      onReceived(item) {
        orderModel.orderReceived({ order_id: item.id }).then(() => {
          this.$set(item, 'status', '3')
          uni.showToast({
            icon: 'none',
            title: '操作成功'
          })
          setTimeout(() => {
            this.changeIndex(4)
          }, 200)
        })
      },
      // 查看物流
      onExpress(item) {
        console.log('received', item)
        if (item.item && item.item.length > 0 && item.item[0].logistics) {
          const id = item.item[0].logistics.id
          // console.log(id)
          uni.navigateTo({
            url: `/sub_service/order/express?id=${id}`
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: '暂无物流信息',
          })
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
//.x {
//  .xx {
//    font-size: 24rpx;
//  }
//}
.wrapper {
  background: $background_color;
  padding-bottom: 20px;
  min-height: 100vh;
  box-sizing: border-box;
  .nav {
    z-index: 99999;
    position: sticky;
    top: 0;
    background: white;
    .title {
      height: 44px;
      background: white;
      display: flex;
      align-items: center;
      .back {
        width: 44px;
        display: flex;
        justify-content: center;
      }
      .text {
        flex: 1;
        text-align: center;
        font-weight: 700;
        margin-left: -44px;
      }
    }
    .tab {
      background: white;
      height: 35px;
      padding: 5px 10px;
      position: sticky;
      top: 0;
    }
  }
  .list {
    margin: 20rpx;
    min-height: 100px;
    //padding: 20rpx;
    //background: white;
    //font-size: 24rpx;
    //border-radius: 10rpx;
    .item {
      background: white;
      padding: 20rpx;
      border-radius: 10rpx;
      margin-bottom: 10px;
      .status {
        //background: red;
        padding: 20rpx 0;
        .text, .group, .win {
          display: inline-block;
          background: $main_color;
          padding: 5rpx 10rpx;
          color: white;
          margin-right: 10px;
        }
        .group {
          background: red;
          &.done {
            background: #f3f5f7;
            color: #000000;
          }
        }
        .win {
          background: red;
          &.not {
            background: #f3f5f7;
            color: #000000;
          }
        }
      }
      .time {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #f5f7f9;
        color: #ccc;
        font-size: 24rpx;
        &.text {
          font-size: 24rpx !important;
        }
      }
      .product {
        display: flex;
        margin-top: 10px;
        .image {
          width: 160rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .img {
            display: block;
          }
        }
        .desc {
          flex: 1;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          align-items: start;
          justify-content: center;
          .title, .sku, .price {
            height: 20px;
          }
          .title {
            font-weight: 700;
            font-size: 26rpx;
          }
          .sku {
            color: #999;
          }
          .price {
            text {
              font-weight: 500;
              //font-size: 26rpx;
            }
            .unit {
              font-size: 20rpx;
              margin-left: 10rpx;
            }
            .split {
              //background: red;
              //height: 20px;
              width: 10px;
              display: inline-block;
            }
          }
        }
      }
      .ops {
        height: 50px;
        //background: red;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .amount {
          width: 300rpx;
          text {
            font-weight: 700;
            font-size: 32rpx;
            color: red;
          }
          .unit {
            font-size: 20rpx;
            margin-left: 10rpx;
          }
        }
        .btn {
          flex: 1;
          display: flex;
          //background: red;
          justify-content: flex-end;
          //justify-content: space-between;
          .x {
            letter-spacing: 1px;
            margin-left: 5px;
          }
        }
      }
      .express {
        background: #f1f2f3;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        border-radius: 10rpx;
        font-size: 20rpx;
        letter-spacing: 1px;
      }
    }
  }
  .nothing {
    color: #ccc;
    line-height: 100px;
    background: white;
    text-align: center;
  }
}
</style>
